<template>
  <!-- 登录 -->
  <div>
    <van-nav-bar title="登录" right-text="注册" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <div class="nav">
      <h1><img src="../assets/logo.jpg"
          alt=""></h1>
      <van-cell-group>
        <van-field v-model="username" center placeholder="+86  请输入手机号" class="phone iconfont icon-shouji" />
        <div class="yzm">
          <van-field v-model="password" center clearable placeholder="验证码" class="sms">
          </van-field>
          <van-button slot="button" size="small" type="primary" class="button">获取验证码</van-button>
        </div>
        <van-button round type="info"  @click="login" class="login">登录</van-button>
        <a @click="mima"><span>密码登录</span></a>
      </van-cell-group>
<div class="bottom">
    <p>使用其他方式登录</p>
    <div class="con"><img src="../assets/weixin.png" alt=""></div>
       <h2>五色糖-成就美好女人<br><p>ROSILOLLY.TO BE A ROSY LADY</p></h2>
</div>
   </div>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: '',
        sms: '',
      }
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },
      onClickRight() {
        this.$router.push('/register')
      },
      mima(){
        this.$router.push('/login')
      },
      login() {
         console.log(this)
         this.$router.push('/hotsale')
      }
    },
  }
</script>

<style scoped="">
  body{
    display: flex;
    flex-direction: column;
  }
  .van-nav-bar__title{
    color: #fff;
    font-size: 14px;
  }
  .van-field__control::placeholder{
    color: #c5c9ca;
  }
  .van-nav-bar{
    height: 46px;
    background: #d46170;
  }
  .van-icon, .van-icon::before{
    color:#FFF;
    font-size: 12px;
  }
  .icon-shouji:before{
    font-size: 20px;
    color: #b85261;
    margin-right: 13px;
  }
  .van-nav-bar__text{
    color:#fff;
    font-size: #12px;
  }
  h1 {
      width: 170px;
      height: 52px;
      margin: 30px auto 40px;
    }

    h1 img {
      width: 100%;
      height: 100%;
    }
  .nav{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    flex: 1;
  }

    .nav .phone,
  .nav .sms {
      background: #eff3f4;
      font-size: 12px;
    }
    .nav .phone {
      width: 276px;
      height: 36px;
      margin: 0 auto;
      margin-bottom: 14px;
      border-radius: 18px;
    }

  .nav .yzm {
    width: 276px;
    height: 36px;
    margin: 0 auto;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
  }

  .nav .button {
    height: 36px;
    width: 84px;
    border-radius: 18px;
    background: #fcabb2;
    border: 0;
  }

  .nav .sms {
    width: 184px;
    height: 36px;
    border-radius: 18px;
  }

  .nav .login {
    width: 276px;
    height: 36px;
    background: #d46170;
    border: 0;
    display: block;
    margin-bottom: 26px;
    position: relative;
  }

  .nav a {
    color: #d46170;
    width:256px;
    font-size: 12px;
    display: block;
    text-align: right;
    margin: 0 auto;
    margin-bottom: 38px;
  }
 .bottom{
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-content: center;
   text-align: center;
 }
 .bottom p{
   font-size: 12px;
 }
 .bottom h2{
   font-size: 18px;
   color: #d95e68;
 }
 .bottom h2 p{
   font-size: 7px;
   color: #d37785;
 }
 
 .bottom .con {
 	width: 33px;
 	height: 33px;
 	border-radius: 50%;
 	border: 1px solid #7bc549;
 	margin: 0 auto;
 	overflow: hidden;
 }
 
 .con img {
 	width: 100%;
 	height: 100%;
 	margin: -2px 0 4px 1px;
 }
</style>
